<template>
  <view class="team-detail">
    <view class="team-detail-contiainer">
      <view class="team-detail-search">
        <nut-searchbar
          v-model="selectDeptNames"
          placeholder="请选择部门考勤组"
          @focus="onFocusGoDept"
        >
          <template v-slot:leftin>
            <i
              class="iconfont icon-a-bumen-1"
              style="font-size: 20px; color: #666"
            ></i>
          </template>
          <template #rightin>
            <i
              class="iconfont icon-daosanjiao"
              style="font-size: 12px; color: #666"
            ></i>
          </template>
        </nut-searchbar>
        <view class="check-in-remind">
          <view class="check-in-remind-title">
            <i
              class="iconfont icon-xiaoxitongzhitixinglingshenglingdang-xianxing"
              style="font-size: 20px; color: #666"
            ></i>
            <view class="check-in-remind-text">
              <text>签到提醒</text>
              <text class="red-dian"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="team-detail-total">
        <view class="total-people">
          <view class="total-people-title">
            <text>正常出勤：</text>
            <text>8</text>
            <text>/12</text>
          </view>
          <view class="total-people-item">
            <view class="total-people-text">
              <text>3</text>
              <text>迟到/人</text>
            </view>
            <view class="total-people-text">
              <text>3</text>
              <text>早退/人</text>
            </view>
            <view class="total-people-text">
              <text>3</text>
              <text>缺卡/人</text>
            </view>
            <view class="total-people-text">
              <text>3</text>
              <text>旷工/人</text>
            </view>
          </view>
        </view>
      </view>
      <view class="team-detail-attendance">
        <view class="attendance-title">
          <i
            class="iconfont icon-kaoqintongji"
            style="font-size: 20px; color: #666"
          ></i>
          <text>考勤组出勤</text>
        </view>
        <view class="attendance-list">
          <view
            class="attendance-item"
            v-for="item in 5"
            :key="item"
          >
            <view class="attendance-item-date">
              <text>05/09 周二</text>
              <text>2025年</text>
            </view>
            <!-- 考勤 -->
            <view
              class="attendance-content"
              v-if="activeTab == 0"
            >
              <view
                class="attendance-content-item"
                v-for="item in 5"
                :key="item"
              >
                <view class="content-item-img">
                  <img
                    src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01lQ7T7U1S9wNfq8m4y_!!1034622205.png"
                    alt=""
                  />
                </view>
                <view class="content-item-info">
                  <view class="content-item-left">
                    <view class="left-text">
                      <view class="left-text-top">
                        <text> 薛之谦 </text>
                        <nut-tag
                          color="#EEF4FF"
                          text-color="#1E74FD"
                          >缺卡
                        </nut-tag>
                      </view>
                      <text>技术部</text>
                    </view>
                    <view class="content-item-right">
                      <i class="iconfont icon-youjiantou1"></i>
                    </view>
                  </view>
                  <view class="content-item-total">
                    <view class="total-item">
                      <text></text>
                      <text>正常出勤</text>
                      <text>28</text>
                    </view>
                    <view class="total-item">
                      <text></text>
                      <text>正常出勤</text>
                      <text>28</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 假勤 -->
            <view
              class="false-diligence"
              v-if="activeTab == 1"
            >
              <view class="false-diligence-item">
                <view class="false-diligence-top">
                  <view class="diligence-top-left">
                    <view class="false-diligence-type">
                      <text>病假</text>
                      <text>/时长2小时</text>
                    </view>
                    <view class="false-diligence-user">
                      <img
                        src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01lQ7T7U1S9wNfq8m4y_!!1034622205.png"
                        alt=""
                      />
                      <text>张三</text>
                      <text>技术部-研发部</text>
                    </view>
                  </view>
                  <view class="diligence-top-right">
                    <img
                      src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01bqI1Z41S9wNyFZmiJ_!!1034622205.png"
                      alt=""
                    />
                  </view>
                </view>
                <view class="false-diligence-text">
                  <text>事由：感冒发烧了，要去医院住院。望批准</text>
                  <text>请假时间：2025/05/09 14:00 - 2025/05/09 14:00</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { navigateTo, useDidShow } from "@tarojs/taro";
import { userInfoStore } from "@/stores/userInfoStore";
const store = userInfoStore();
const selectDeptIds = ref([]);
const selectDeptNames = ref([]);
const props = defineProps(["activeTab"]);
const activeTab = ref(0);
const searchValue = ref("");
onMounted(() => {
  activeTab.value = props.activeTab;
});
useDidShow(() => {
  selectDeptIds.value = [];
  selectDeptNames.value = [];
  activeTab.value = props.activeTab;
  let storeSelectDeptIds = JSON.parse(JSON.stringify(store.selectDeptIds));
  storeSelectDeptIds.forEach((item: any) => {
    selectDeptIds.value.push(item.deptId);
    selectDeptNames.value.push(item.deptName);
  });
  console.log(selectDeptNames.value, "selectDeptNames");
});
watch(
  () => props.activeTab,
  val => {
    activeTab.value = val;
  },
);
const onFocusGoDept = ids => {
  navigateTo({
    url: "/components/deptStaffSelect/index?ids=" + selectDeptIds.value,
  });
};
</script>

<style lang="less">
@import url("./index.less");
</style>
